<template>
	<view>
		<view v-if="mediaType === 'audio'" class="msg-audio bg-grey round_view   tui-center tui-flex" @click="playFu">
			<image v-if="position === 'left'" class="msg-audio-voice-img tui-col-6" :src="right_icon"></image>
			<view class="tui-col-6 text-20 text-black margin-left">{{ count }}s</view>
			<image v-if="position === 'right'" class="msg-audio-voice-img tui-col-6" :src="left_icon"></image>
		</view>
		<view @click="playVideoFu">
			<video
			
				class="msg-img round_view"
				:class="mediaType === 'audio' ? 'hidden' : ''"
				:id="vidoeId"
				:src="src"
				object-fit="fill"
				:ref="vidoeId"
			></video>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		position: {//位置 左边还是右边
			type: String,
			default: 'left'
		},
		src: {//地址
			type: String,
			default: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3'
		},
		count: {//音频的长度
			type: Number,
			default: 5
		},
		mediaType: {//媒体类型 语音还是视频
			type: String,
			default: 'audio' //audio video
		}
	},
	data() {
		return {
			right_icon:"",
			left_icon:"",
			vidoeId:this.generateUUID(),
			playState: true,
			videoContext: '',
			duration: '',
			intervalId: '',
			tempCount: ''
		};
	},
	methods: {
		generateUUID() {
		    var d = new Date().getTime();
		    if (window.performance && typeof window.performance.now === "function") {
		        d += performance.now(); //use high-precision timer if available
		    }
		    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
		        var r = (d + Math.random() * 16) % 16 | 0;
		        d = Math.floor(d / 16);
		        return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
		    });
		    return uuid;
		},
		countTime() {
			var that_ = this;
			that_.tempCount = that_.count;
			that_.intervalId = setInterval(() => {
				if (that_.count > 0) {
					that_.count = that_.count - 1;
				}
			}, 1000);
			setTimeout(() => {
				clearInterval(that_.intervalId);
				that_.count = that_.tempCount;
			}, (that_.tempCount + 1) * 1000);
		},
		playVideoFu() {
			if (this.playState) {
				this.videoContext.play();
				
			} else {
				this.videoContext.seek(0);
				this.videoContext.pause()
			}
			this.playState = !this.playState;
		},
		playFu() {
			if (this.playState) {
				this.videoContext.play();
				let temp = this.count;
				this.countTime();
			} else {
				clearInterval(this.intervalId);
				this.videoContext.seek(0);
				this.videoContext.pause();
				this.count = this.tempCount;
			}
			this.playState = !this.playState;
		},
		// 更新进度条
		timeupdate(event) {
			if (this.lock) return; // 锁
			var currentTime, duration;
			if (event.detail.detail) {
				currentTime = event.detail.detail.currentTime;
				duration = event.detail.detail.duration;
			} else {
				currentTime = event.detail.currentTime;
				duration = event.detail.duration;
			}
			this.currentTime = currentTime;
			this.duration = duration;
		},
		loadedmetadata(data) {
			this.duration = data.detail.duration;
		}
	},
	created() {
		this.videoContext = uni.createVideoContext(this.vidoeId);
	}
};
</script>

<style>
.msg-audio {
	height: 50rpx;
	width: 150rpx;
}
.msg-audio-voice-img {
	width: 50rpx;
	height: 50rpx;
	margin-left: 10rpx;
}
.tui-center {
	display: flex;
	align-items: center;
	justify-content: center;
}
.round_view {
	border-radius: 25rpx;
}
.msg-img{
	max-width: 300rpx;
	max-height: 600rpx;
}
.bg-grey {
	background-color: #eeeeee;
}
.tui-col-6 {
	width: 50%;
}
.margin-left {
	margin-left: 20rpx;
}
.text-20 {
	font-size: 20rpx;
}
</style>
